<template>
  <div class="container">
    
    <!-- 导航条 -->
      <van-nav-bar fixed title="订单结算台" :left-arrow="true" :placeholder="true" @click-left="$router.back()" />

    <!-- 收货地址-->
     <div class="cart" @click="changeAddress">

      <img class="img-left" src="@/assets/icon_delivery.png" alt="">

      <div class="message">
        <div>小明</div>
        <div>陕西省太原市</div>
      </div>

      <img class="img-right" src="@/assets/icon_arrow_right.png" alt="">
     </div>

     <!-- 商品列表 -->
     <div class="prd-content">

      <div  class="prd-list" v-for="item in order.goodsList" :key="item.id">
        <img class="prd-list-img"  :src="item.goods_image" alt="">
        <div>
          <div class="prd-list-name" >{{ item.goods_name }}</div>
          <div class="prd-list-bottom">
            <span class="prd-list-bottom-left" >x{{ item.total_num }}</span>
            <span class="prd-list-bottom-right" >¥{{ item.total_price }}</span>
          </div>
        </div>
      </div>

      <!-- 合计 -->
      <div class="prd-content-bottom">

        <span>共 {{ totalNum }} 件商品, 合计: </span>
        <span class="prd-content-bottom-price" >¥{{ totalPrice }}</span>
      </div>


     </div>

     <!-- 订单信息 -->
     <div class="orderinfo">
      <span>订单总金额:</span>
      <span class="orderinfo-right" >¥{{ totalPrice }}</span>
     </div>
     <div class="orderinfo">
      <span>优惠券:</span>
      <span>无优惠券可用</span>
     </div>
     <div class="orderinfo">
      <span>配送费用:</span>
      <span class="orderinfo-right" >+ ¥0</span>
     </div>

     <!-- 结算台 -->
     <div class="settle-view">

      <div >
        <span>实付款: </span>
        <span class="settle-view-price">¥{{ totalPrice }}</span>
      </div>

      <button>提交订单</button>

     </div>



  </div>
</template>

<script>
import { getCheckOrder, getAddressList } from '@/api'

export default {
    name:'pay',
    data(){
      return {
        order:{}
      }
    },
    created(){
      this.getCheckOrderData()
      this.getAddress()
    },
    computed: {
      totalNum(){
        if(this.order.goodsList) {

          const sum = this.order.goodsList?.reduce(function(prev, cur) { 
            return prev + cur.total_num;
          }, 0) 
          return sum
        } else {
          return 0
        }
      },
      totalPrice(){
        if(this.order.goodsList) {

          const sum = this.order.goodsList?.reduce(function(prev, cur) { 
            return prev + cur.total_num * cur.total_price;
          }, 0)
          return sum
        } else {
          return 0
        }
      }
    },
    methods:{
      // 获取订单数据
      async getCheckOrderData(){ 
        const resp = await getCheckOrder(this.$route.query.mode, {'cartIds' : this.$route.query.cartIds})
        this.order = resp.data.order
        // console.log(resp)
      },
      async getAddress(){
        const resp = await getAddressList()
        console.log('------------')
        console.log(resp)
      },
      changeAddress(){
        this.$router.push('/leeAddress')
      }
    }
}
</script>

<style lang="less" scoped>

.container {
  display: flex;
  flex-direction: column;
  padding-bottom: 50px;

  .cart {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 0px 20px;
    background: url("@/assets/border-line.png") bottom repeat-x;
    

    .img-left, .img-right {
      width: 20px;
      height: 20px;
    }

    .message {
      flex: 1;
      margin: 0px 15px;
    }

  }

  .prd-content {

    padding: 10px 15px;
    border-bottom: #eeeeee 0.5px solid;

    .prd-list {
      display: flex;
      flex-direction: row;
      padding: 10px 15px;

      .prd-list-img {
        width: 70px;
        height: 70px;
        margin-right: 10px;
      }

      .prd-list-name {
        color: #202020;
        font-size: 13px;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }

      .prd-list-bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 10px;

        .prd-list-bottom-left {
          font-size: 13px;
          color: #202020;
        }

        .prd-list-bottom-right {
          font-size: 15px;
          color: orangered;
        }
      }


    }

    .prd-content-bottom {
      text-align: end;
      font-size: 13px;
      color: #333333;

      .prd-content-bottom-price {

        color: orangered;
      }

    }


  }

  .orderinfo {
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #202020;
    font-size: 13px;
    padding: 10px 15px;

    .orderinfo-right {

      color: orangered;
    }

  }
  
  .settle-view {

    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    height: 50px;
    border-top: #eeeeee 1px solid;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px 0px 0px 15px;
    color: #202020;
    font-size: 15px;
    line-height: 50px;

    .settle-view-price {
      color: orangered;
    }

    button {
      height: 100%;
      width: 80px;
      background-color: orangered;
      border: none;
      color: white;
    }
  }


}

</style>